<template>
  <div>
    <div>
      <header>
        <div class="header">
          <div class="student_logo">
            <router-link :to="{path:'/'}">
            </router-link>
            <div  style="width: 300px">
              <a href="https://sme.miit.gov.cn/" target="_blank">
                <img src="../../../public/logo.png" style="margin-top: 20px;margin-left: 40px;" height="30" width="150">
              </a>
              <div class="student_title">全国中小企业云秒贴平台</div>
            </div>
            </div>
          <div v-if="userData1.code === 20" class="student_icon1">
            <div style="font-size: 16px;color: #20a0ff;width: 200px;">
              <div style="margin-right: 20px"><router-link :to="{path:'/enterpriseregister'}" class="sidebar-nav-link">注册</router-link></div>
              <div><router-link :to="{path:'/enterpriselogin'}" class="sidebar-nav-link">登录</router-link></div>
            </div>
          </div>
          <div v-if="userData1.code === 200 && loginStatus === '1' " class="student_icon">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <img src="../../../public/headericon.png" height="64" width="62">
              </span>
              <el-dropdown-menu slot="dropdown">
                <router-link :to="{path:'/entUser'}"><el-dropdown-item icon="el-icon-setting">用户中心</el-dropdown-item></router-link>
              <el-dropdown-item icon="el-icon-switch-button"><span @click="handleLoginOut()">退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown><div style="margin-top: 8px;font-size: 16px;color: #20a0ff">{{ userData.mobile }}</div>
          </div>
          <div v-if="userData1.code === 200 && loginStatus === '0' " class="student_icon">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <img src="../../../public/headericon.png" height="64" width="62">
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-switch-button"><span @click="handleLoginOut()">退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown><div style="margin-top: 8px;font-size: 16px;color: #20a0ff">{{ userData.mobile }}</div>
          </div>
        </div>
        <div class="header_background">
          <div class="nav"><ul>
            <li>
              <router-link :to="{path:'/'}" class="sidebar-nav-link">首页</router-link>
            </li>
<!--            <li>-->
<!--              <router-link :to="{path:'joblist'}" class="sidebar-nav-link">招聘岗位</router-link>-->
<!--            </li>-->
<!--            <li>-->
<!--              <router-link :to="{path:'joblist', query: { jobTypeCode: 3 }}" class="sidebar-nav-link">实习机会</router-link>-->
<!--            </li>-->
<!--            <li>-->
<!--              <router-link :to="{path:'componaylist'}" class="sidebar-nav-link">企业之窗</router-link>-->
<!--            </li>-->
<!--            <li>-->
<!--              <router-link :to="{path:'joblist', query: { jobTypeCode: 4 }}" class="sidebar-nav-link">志愿者</router-link>-->
<!--            </li>-->
<!--            <li>-->
<!--              <router-link :to="{path:'newslist'}" class="sidebar-nav-link">政策资讯</router-link>-->
<!--            </li>-->
          </ul></div>
        </div>
      </header>
    </div>
    <div>
      <router-view />
    </div>
    <div>
      <footer class="foot">
        <div class="foot_text">
          <div>
            承办单位：中国中小企业信息网 | 支持单位：北京中小在线信息服务有限公司
          </div>
          <div>
            <a href="https://beian.miit.gov.cn" target="_blank">京ICP备17022951号-1</a>
          </div>
          <div>
            联系方式：010-68577312
          </div>
          <div class="foot_img">
            <img src="../../../public/2wm.png" height="1280" width="1280"></div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import { loginOut } from '@/api/user'
export default {
  name: 'Headandfoot',
  components: {
  },
  data() {
    return {
      userData: {},
      loginStatus: {},
      userData1: {},
      username: '',
      userType: ''
    }
  },
  created() {
  },
  methods: {
    handleLoginOut() {
      const that = this
      loginOut().then(response => {
        if (response.code === 200) {
          that.$router.push('/')
          that.userData1.msg = 'not login'
        }
      })
    }
  }
}
</script>

<style scoped>
  /*头部*/
  .header{
    width: 1200px;
    margin: auto;
    overflow: hidden;
  }.header div{
     float: left;
   }
  .student_logo{
    margin: 20px 0px 10px 0px;
  }
  .student_title{
    width: 260px;
    height: 19px;
    font-weight: bold;
    color: #2B5C8a;
    font-size: 20px;
    margin: 5px 0 0 40px;
  }
  .student_icon1{
    float: right !important;
    margin-right: 10px;
    margin-top: 50px;
  }
  .student_icon1 img{
    width: 60px;
    height: 60px;
  }
  .student_icon{
   float: right !important;
    margin-right: 10px;
    margin-top: 50px;
  }
  .student_icon img{
    width: 40px;
    height: 40px;
  }
  .header_background{
    background-color: #2c5c8a;
  }
  .nav{
    width: 1200px;
    margin: auto;
    background-color: #2c5c8a;
    overflow: hidden;
  }
  .nav li{
    list-style: none;
    float: left;
    height: 38px;
    margin-right: 60px;
    margin-left: 20px;
  }
  .nav li a{
    font-size: 20px;
    color: #ffffff;
    font-weight: bold;
  }
.demonstration2 {
  display: block;
  font-size: 16px;
  margin-top: 53px;
  text-align: center;
}
.demonstration3 {
  display: block;
  font-size: 16px;
  margin-top: 52px;
  text-align: center;
}
  .loginrk{
    display: block;
    font-size: 16px;
    margin-top: 42px;
    float: right;
    margin-left: 100px;
  }
  .loginrk div{
    margin-left: 20px;
    margin-top: 0px;
  }
  /*底部*/
  .foot {
    background-color: #404042;
    line-height: 35px;
  }
  .foot_text {
    color: #9e9ea0;
    margin: 0 auto;
    text-align: center;
    padding-top: 30px;
    width: 1200px;
    font-size: 14px;
  }
  .foot_img img {
    float: right;
    position: relative;
    bottom: 127px;
    right: 80px;
    width: 120px;
    height: 120px;
  }
</style>
